<template>
  <div class="log-operation" style="width: 100%; padding: 10px">
    <!--    <h2>操作日志</h2>-->

    <!-- 搜索栏 -->
    <div style="margin-bottom: 20px;">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <!--        <el-form-item label="用户名">-->
        <el-form-item>
          <el-input v-model="searchForm.username" placeholder="请输入用户名查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchLogs">查询</el-button>
          <el-button type="success" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <el-table :data="logData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="username" label="用户名" width="120"></el-table-column>
      <el-table-column prop="operationDescription" label="操作描述" show-overflow-tooltip></el-table-column>
      <el-table-column prop="operationTime" label="操作时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.operationTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="执行时间(ms)" width="120"></el-table-column>
      <el-table-column prop="ipAddress" label="IP地址" width="150"></el-table-column>
      <el-table-column prop="operationResult" label="操作结果" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.operationResult === 'SUCCESS' ? 'success' : 'danger'">
            {{ scope.row.operationResult === 'SUCCESS' ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="requestUrl" label="请求URL" show-overflow-tooltip></el-table-column>
      <el-table-column prop="requestMethod" label="请求方法" width="100"></el-table-column>
      <el-table-column prop="errorMessage" label="错误信息" show-overflow-tooltip></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-top: 20px; text-align: right;">
      <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "LogOperation",
  data() {
    return {
      loading: false,
      searchForm: {
        username: ''
      },
      logData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.fetchLogs();
  },
  methods: {
    // 获取日志数据
    async fetchLogs() {
      this.loading = true;
      try {
        const response = await request.get('/log/operationLogs', {
          params: {
            pageNum: this.pagination.currentPage,
            pageSize: this.pagination.pageSize,
            username: this.searchForm.username || undefined
          }
        });

        if (response.code === 200) {
          this.logData = response.data;
          this.pagination.total = response.total;
        } else {
          this.$message.error(response.message || '获取日志失败');
        }
      } catch (error) {
        this.$message.error('获取日志失败: ' + error.message);
      } finally {
        this.loading = false;
      }
    },

    // 查询
    searchLogs() {
      this.pagination.currentPage = 1;
      this.fetchLogs();
    },

    // 重置查询
    resetSearch() {
      this.searchForm.username = '';
      this.pagination.currentPage = 1;
      this.fetchLogs();
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.fetchLogs();
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.fetchLogs();
    },

    // 格式化日期时间
    formatDateTime(datetime) {
      if (!datetime) return '';
      return datetime.replace('T', ' ');
    }
  }
}
</script>

<style scoped>
.log-operation {
  width: 100%;
  padding: 10px;
}
</style>
